<template>
	<view class="container">
		<view class="panel-header padding-top solid-bottom">
			<view class="g-goBack" @click="$utils.toBack()">
				<view class="cuIcon-back"></view>
			</view>
			<view class="text-cut">订单：{{tradeNo}}</view>
		</view>
		<scroll-view scroll-x="true" class="bg-white nav">
			<view class="flex text-center">
				<view class="cu-item flex-sub" :class="index == tabIndex?'text-orange cur':''"
					v-for="(item,index) in tabListData" :key="index" @click="bindTabChnage(index)">
				{{item.name}}
				</view>
			</view>
		</scroll-view>
		<view class="list-body margin-top-sm">
			<scroll-view scroll-y="true">
				<view class="cu-card no-card solid-bottom" v-for="(item,index) in listData" :key="index">
					<view class="cu-item padding">
						<view class="text-orange"><view class="title">优惠活动：</view>{{item.title}}</view>
						<view><view class="title">优惠信息：</view>{{item.couponInfo}}</view>
						<view><view class="title">活动开始：</view>{{item.startDate}}</view>
						<view><view class="title">活动结束：</view>{{item.endDate}}</view>
						<view><view class="title">活动描述：</view>{{item.note || '---'}}</view>
						<view class="btn-info">
							<button class="cu-btn sm bg-orange" @click="btnGrantCoupon(item)">发放优惠券</button>
						</view>
					</view>
				</view>
				<view class="foot" v-if="listData && listData.length > 0"><text class="ftxt">我也是有底线的</text></view>
				<view class="foot" v-else><text class="ftxt">暂无数据</text></view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tradeNo:null,
				placeId:null,
				placeName:'网点名称',
				memberId:null,
				createDate:null,
				
				businessType:null,
				businessTypeName:null,
				title:null,
				
				tabIndex:0,
				tabListData:[{name:'折扣券',type:1},{name:'代金券',type:2},{name:'免租期券',type:3},{name:'洗车劵',type:10}],
				
				listData:[]
			};
		},
		onLoad(option) {
			const _self = this;
			const eventChannel = this.getOpenerEventChannel();
			eventChannel.on('fromData', function(data) {
			    console.log(data)
				_self.tradeNo = data.tradeNo;
				_self.placeId = data.leasePlaceId;
				_self.placeName = data.leasePlaceName;
				_self.memberId = data.memberId;
				_self.createDate = data.createDate;
				_self._loadDataList();
			})
		},
		methods: {
			_loadDataList:function(){
				uni.showLoading({
					title: '加载中'
				});
				let couponType = this.tabListData[this.tabIndex].type;
				const api = this.$request;
				const _self = this;
				api.post(api.url.orderMemberCouponList,{
					couponType:couponType,
					tradeNo:this.tradeNo,
					createDate:this.createDate
				},res=>{
					uni.hideLoading();
					console.log(res)
					if(res.code==200){
						_self.listData = res.body.items;
					}else if(res.code==202){
						//忽略
					}else if(res.msg){
						uni.showModal({
							content:res.msg,
							showCancel:false
						});
					}
				})
			},
			bindTabChnage:function(index){
				this.tabIndex = index;
				this.listData=[];
				this._loadDataList();
			},
			btnGrantCoupon:function(item){
				const _self = this;
				const api = this.$request;
				uni.showModal({
					title:'温馨提示',
					content:'确定要发放【'+item.title+'】给该订单的会员吗？',
					complete:function(res){
						if(res.confirm){
							api.post(api.url.orderMemberCouponSet,{
								couponActivityId:item.activityId,
								placeId:_self.placeId,
								memberId:_self.memberId,
							},res=>{
								console.log(res)
								if(res.code==200){
									uni.showToast({
										title:'操作成功',
										icon:'success'
									});
									_self.title = item.title;
								}else if(res.msg){
									uni.showModal({
										content:res.msg,
										showCancel:false
									});
								}else {
									uni.showToast({
										title:'操作失败',
										icon:'error'
									});
								}
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="less">
.container .panel-header{height:90rpx;width:100vw;font-size:28rpx;background-color:#fff;}
.container .panel-header .text-cut{width:75%;margin:auto;text-align:center;}
.container .list-body scroll-view{height:85vh;}
.container .list-body .cu-card .title {min-width:calc(4em + 30rpx);display:inline-block;margin-bottom:5rpx;}
.container .list-body .cu-card .cu-item {position: relative;}
.container .list-body .cu-card .btn-info {float:right;}
</style>
